<script setup lang="ts">
import { ref, onActivated, onDeactivated, useTemplateRef } from 'vue'
import VideoWrap from '../video-wrap.vue'

withDefaults(
  defineProps<{
    src: string
    text?: string
    pc?: boolean
  }>(),
  {
    text: '',
    pc: false,
  },
)

const playing = ref(false)
const videoRef = useTemplateRef<HTMLVideoElement | null>('videoRef')

onActivated(async () => {
  playing.value = true
  if (videoRef.value) {
    await videoRef.value.play().catch()
  }
})
onDeactivated(() => {
  playing.value = false
  if (videoRef.value) {
    videoRef.value.pause()
    videoRef.value.currentTime = 0
  }
})
</script>

<template>
  <div class="w-full">
    <VideoWrap class="w-full aspect-video lg:aspect-[67/42]" :playing>
      <video
        ref="videoRef"
        class="w-full h-full object-cover"
        muted
        @play="playing = true"
        @ended="playing = false"
        :src
      ></video>
    </VideoWrap>
    <p
      v-if="!pc"
      class="mt-[3.25vw] text-xs text-center h-[calc(0.75rem*1.33*2)] md:h-auto md:mt-[0.75rem]"
    >
      {{ text }}
    </p>
  </div>
</template>
